<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        div {
        	margin: 200px auto;
        	width: 250px;
        	height: 180px;
        	/* background-color: red; */
        	position: relative;
        	

        }
        div img {
        	position: absolute;
        	width: 100%;
        	height: 100%;
        	transform-origin: top right;
        	transition: all 0.6s;

        }
        div:hover img:nth-child(1) {
        	transform: rotate(60deg);


        }
        div:hover img:nth-child(2) {
        	transform: rotate(120deg);


        }
        div:hover img:nth-child(3) {
        	transform: rotate(180deg);


        }
        div:hover img:nth-child(4) {
        	transform: rotate(240deg);


        }
        div:hover img:nth-child(5) {
        	transform: rotate(300deg);


        }
        div:hover img:nth-child(6) {
        	transform: rotate(360deg);


        }


        </style>
    </head>
    <body>
    <div>
    	<img src="images/6.jpg"  alt="">
    	<img src="images/5.jpg" alt="">
    	<img src="images/4.jpg" alt="">
    	<img src="images/3.jpg" alt="">
    	<img src="images/2.jpg" alt="">
    	<img src="images/1.jpg" alt="">
    </div>
    </body>
</html>